<template>
  <a-modal
    v-model:visible="show"
    class="lightbox-custom lightbox-blessing"
    :width="responseWidth"
    :footer="false"
    :closable="false"
  >
    <div class="lightbox__wrapper">
      <div class="lightbox__content">
        <div class="lightbox__content__head">
          <div
            class="lightbox__content__cross i i-cross-modal"
            @click="hide"
          ></div>
        </div>
        <div class="lightbox__content__body">
          <div class="lightbox__content__top">
            <div
              v-show="image_url"
              class="lightbox__content__image"
            >
              <img :src="image_url" :alt="alt" />
            </div>
            <div
              class="lightbox__content__name"
              v-html="name"
            ></div>
            <div
              v-show="activePersonTypeLabel"
              class="lightbox__content__label"
              v-html="activePersonTypeLabel"
            ></div>
          </div>
          <div
            class="lightbox__content__title"
            v-html="'Blessing Message to YCYW'"
          ></div>
          <div
            class="lightbox__content__content"
            v-html="message"
          ></div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'LightboxBlessingMessage'
})

interface Props {
  componentProps?: {
    image_url?: string
    image_alt?: string
    name?: string
    label?: string
    person_type?: string
    message?: string
  }
  visible?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  componentProps: () => ({}),
  visible: false,
})
const emit = defineEmits(['update:visible'])

const responseWidth = computed(() =>
  window?.innerWidth > 767.98
    ? window?.innerWidth > 1100
      ? '992px'
      : '720px'
    : '100%'
)

const show = computed(() => props.visible)
const image_url = computed(() => props.componentProps?.image_url ?? '')
const image_alt = computed(() => props.componentProps?.image_alt ?? name.value)
const alt = computed(() => image_alt.value)
const name = computed(() => props.componentProps?.name ?? '')
const label = computed(() => props.componentProps?.label ?? '')
const personType = computed(() => props.componentProps?.person_type ?? '')
const message = computed(() => props.componentProps?.message ?? '')

const personTypeList = computed(() => [
  {
    key: 'parent',
    name: '家长',
    value: '家长',
  },
  {
    key: 'alumni',
    name: '校友',
    value: '校友',
  },
  {
    key: 'student',
    name: '学生',
    value: '学生',
  },
  {
    key: 'faculty-staff',
    name: '教学人员/行政人员',
    value: '教学人员/行政人员',
  },
  {
    key: 'others',
    name: '其他',
    value: '其他',
  },
])

const activePersonTypeLabel = computed(() => {
  if (personType.value === 'others') return label.value
  return (
    personTypeList.value.find((v: any) => v.key === personType.value)?.name ?? label.value
  )
})

const hide = () => {
  emit('update:visible', false)
}
</script>

<style lang="scss" scoped>
.i {
  position: relative
}

.i:after,.i:before {
  content: "";
  display: inline-block;
  vertical-align: middle
}

.i-cross-modal:before {
  transition: all .2s ease-in-out;
  width: 24px;
  height: 24px
}

@media(prefers-reduced-motion:reduce) {
  .i-cross-modal:before {
      transition: none
  }
}

@media(max-width: 767.98px) {
  .i-cross-modal:before {
      width:16px;
      height: 16px
  }
}

.i-cross-modal:before {
  background: url() 50% no-repeat;
  background-size: 100% auto
}

.i-cross-modal:hover:before {
  background: url() 50% no-repeat;
  background-color: #f7f7fa;
  background-size: 100% auto;
  border-radius: 4px
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content {
    min-height: calc(var(--vh) * 100);
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__head {
  display: flex;
  justify-content: flex-end;
  padding: 40px 60px 0;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__head {
    padding: 19px 16px 14px;
    border-bottom: 2px;
    border-style: solid;
    border-image: linear-gradient(270deg, #FF9E18 0%, #FF0044 48.44%, #0033A5 100%) 1;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__title {
  font-size: 26px;
  line-height: 1.69%;
  font-weight: 500;
  color: var(--text-color--primary, #0032A0);
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__title {
    font-size: 14px;
    line-height: 1.29%;
    letter-spacing: 0.02em;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__cross {
  cursor: pointer;
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__cross::before {
  background: url("~static/images/icons/icon-lightbox-close.svg") center center no-repeat;
  background-size: 100% auto;
  width: 24px;
  height: 24px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__cross::before {
    width: 20px;
    height: 20px;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__body {
  padding: 0 60px 40px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__body {
    padding: 32px 12px 40px;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__top {
  display: flex;
  align-items: center;
  margin-bottom: 34px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__top {
    margin-bottom: 29.5px;
    flex-direction: column;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__image {
  margin-right: 39px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__image {
    margin-right: 0;
    margin-bottom: 21.5px;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__image img {
  width: 118px;
  height: 118px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__image img {
    width: 100px;
    height: 100px;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__name,
.lightbox-blessing .lightbox__wrapper .lightbox__content__name :deep(*),
.lightbox-blessing .lightbox__wrapper .lightbox__content__label,
.lightbox-blessing .lightbox__wrapper .lightbox__content__label :deep(*),
.lightbox-blessing .lightbox__wrapper .lightbox__content__title {
  color: var(--text-color--primary, #0032A0);
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__name,
.lightbox-blessing .lightbox__wrapper .lightbox__content__name :deep(*) {
  font-size: 36px;
  line-height: 1.22;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__name,
  .lightbox-blessing .lightbox__wrapper .lightbox__content__name :deep(*) {
    font-size: 14px;
    line-height: 1.29;
    font-weight: 500;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__label,
.lightbox-blessing .lightbox__wrapper .lightbox__content__label :deep(*) {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__label,
  .lightbox-blessing .lightbox__wrapper .lightbox__content__label :deep(*) {
    font-size: 14px;
    line-height: 1.43;
    font-weight: 500;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__label {
  display: flex;
  align-items: center;
  margin-left: 22px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__label {
    flex-direction: column;
    margin-left: 0;
    margin-top: 6px;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__label::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 17px;
  background-color: var(--text-color--primary, #0032A0);
  margin-right: 22px;
  border-radius: 2px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__label::before {
    width: 17px;
    height: 2px;
    margin-right: 0;
    margin-bottom: 6px;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__title {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__title {
    font-size: 14px;
    line-height: 1.29;
    font-weight: 500;
  }
}

.lightbox-blessing .lightbox__wrapper .lightbox__content__content,
.lightbox-blessing .lightbox__wrapper .lightbox__content__content :deep(*) {
  font-size: 20px;
  line-height: 1.75;
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .lightbox-blessing .lightbox__wrapper .lightbox__content__content,
  .lightbox-blessing .lightbox__wrapper .lightbox__content__content :deep(*) {
    font-size: 16px;
    line-height: 1.4;
  }
}

:deep(.arco-modal-header) {
  display: none;
}
</style>
